<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>flyingon视图模型演示</title>
    <link rel="stylesheet" type="text/css" href="../css/default/flyingon.css" />
    <style type="text/css">

    html, body {
        margin:0;
        border:0;
        padding:0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .silver {
        background-color: silver;
    }

    </style>
    <script type="text/javascript" src="../js/flyingon.js"></script>
</head>
<body>

    <div id="host" style="width:100%;height:100%;overflow:hidden;">
    </div>

    <script type="text/x-template" id="template">
        <Panel :layout="layout" height="100%" :class:silver="silver" background-color="color" padding="10">
            <Panel width="auto" height="75" #loop="items(item, index)" @click="operate_click(item, index)">
                <Label width="90" :text="item_label(item, index)" />
                <TextBox width="120" :value="item.text" #model="item.text" />
                <Button tag="add" :text="operate.add" margin="0 5" />
                <Button tag="edit" :text="operate.edit" />
                <Button tag="remove" :text="operate.remove" margin="0 5" />
                <Panel width="auto" height="50" padding="4 0 4 90">
                    <Label #loop="item.items(subitem)" :width="subitem_width(subitem)" margin="2 0" background-color="silver" height="5px" />
                </Panel>
            </Panel>
            <Label :text="text" />
        </Panel>
    </script>

    <script type="text/javascript">



        var host = flyingon.view({
            
            host: 'host',

            template: '#template',

            defaults: {

                layout: 'vertical-line',

                text: 'text ...',

                operate: {
                    add: 'add',
                    edit: 'edit',
                    remove: 'remove'
                }
            },

            creating: function (vm) {


                vm.item_label = function (item, index) {

                    return ++index + '. ' + item.$get('text'); //item.text写法不追踪变化
                };


                vm.subitem_width = function (value) {

                    return value * 10 + 20;
                };


                vm.operate_click = function (item, index, control, event) {
                        
                    switch (event.target.tag())
                    {
                        case 'add':
                            this.items.push({ text: Math.random() * 10000000 | 0, items: ('' + (Math.random() * 100000 | 0)).split('') });
                            break;

                        case 'edit':
                            this.items.$set(index, { 'text': Math.random() * 10000000 | 0, items: ('' + (Math.random() * 100000 | 0)).split('') });
                            break;

                        case 'remove':
                            this.items.splice(index, 1);
                            break;
                    }
                };


              
                vm.$watch(function (data) {

                    //debugger
                });

                
                var data = [];

                for (var i = 0; i < 3; i++)
                {
                    data.push({ text: 'text ' + i, items: ('' + (Math.random() * 100000 | 0)).split('') });
                }

                vm.$set('items', data);

            },

            created: function ()  {

            }


        });


        flyingon.dom_on(window, 'resize', function () {

            host.update();
        });


    </script>

</body>
</html>